<template>
  <div class="text_item_box">
    <div
      class="text_item clearfix"
      v-for="(item, index) in itemList"
      :key="index"
    >
      <div class="label_content">
        <el-input :placeholder="`请输入${item.label}`"  v-model="item.value" @keyup.native="assemblyValue"></el-input>
      </div>
    </div>
  </div>
</template>

<script>
import Emitter from 'element-ui/src/mixins/emitter'
export default {
  components: {},
  mixins: [Emitter],
  props: {
    value: {
      type: String,
      default: ''
    },
    labelNames: {
      type: String,
      default: ''
    }
  },
  computed: {
    modelValue: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
        this.dispatch('ElFormItem', 'el.form.change', val)
      }
    },
    itemList () {
      let list = []
      if (this.labelNames) {
        list = this.labelNames.split(',')
        list = list.map(item => {
          return {
            label: item,
            value: ''
          }
        })
      }
      return list
    }
  },
  data () {
    return {
    }
  },
  watch: {},
  methods: {
    titleAddTag (title) {
      const list = title.split('')
      let str = ''
      list.map(item => {
        str += `<div>${item}</div>`
      })
      return str
    },
    assemblyValue () {
      let str = ''
      if (this.itemList && this.itemList.length > 0) {
        this.itemList.map(item => {
          str += `${item.value},`
        })
        str = str.substring(0, str.lastIndexOf(','))
      }
      this.modelValue = str
    },
    validateParams () {
      for (let i = 0; i < this.itemList.length; i++) {
        let item = this.itemList[i]
        if (item.value === null || item.value === '') {
          this.$vux.toast.text(`请填写${item.label}`)
          return false
        }
      }
      return true
    }
  },
  created () {},
  mounted () {
  }
}
</script>
<style lang="less" scoped>
.text_item_box
{
  .text_item
  {
    display: flex;
    flex-flow: nowrap;
    .label_content
    {
      display: flex;
      align-items: center;
      flex: 1;
      margin-bottom: 10px;
      .label_content_input
      {
        font-size: 12px;
        color: #5d5d5d;
        width: 100%;
      }
    }
    &:last-child
    {
      border-bottom: none
    }
  }
}
</style>
